<template>
  <div>
    <el-form
      ref="scheduleForm"
      :model="form"
      label-position="left"
      label-width="100px"
      class="demo-form-inline"
    >
      <el-form-item label="项目名称：">
        <el-input v-model="form.projectName" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="合同名称：">
        <el-input v-model="form.contractName" disabled />
      </el-form-item>
      <el-form-item label="进度节点:" prop="nodeName">
        <el-input
          disabled
          class="nodeName"
          v-model="form.nodeName"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="计划周期:" prop="planPeriod">
        <el-date-picker
          disabled
          v-model="form.planPeriod"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="计划内容:" prop="planContent">
        <el-input
          disabled
          maxlength="512"
          show-word-limit
          v-model="form.planContent"
          :rows="5"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="考核目标:" prop="assessmentTarget">
        <el-input
          disabled
          v-model="form.assessmentTarget"
          :rows="5"
          maxlength="512"
          show-word-limit
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      考核指标
      <hr />
      <el-form-item class="index" label="授权专利:">
        <el-input
          disabled
          type="text"
          class="authorizedPatent"
          v-model="form.authorizedPatent"
        />&ensp;个
      </el-form-item>
      <el-form-item class="index" label="授权软著:">
        <el-input
          disabled
          type="text"
          class="authorizedSoftworks"
          v-model="form.authorizedSoftworks"
        />&ensp;个
      </el-form-item>
      <el-form-item class="index" label="学校著作:">
        <el-input disabled type="text" class="schoolWorks" v-model="form.schoolWorks" />&ensp;个
      </el-form-item>
      <el-form-item class="index" label="学术论文:">
        <el-input
          disabled
          type="text"
          class="academicPapers"
          v-model="form.academicPapers"
        />&ensp;篇
      </el-form-item>
      <el-form-item class="index" label="科技奖项:">
        <el-input
          disabled
          type="text"
          class="technologyAwards"
          v-model="form.technologyAwards"
        />&ensp;个
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    const store = useStore()
    const form = store.state.projectCenter.progressExecuteForm
    form.planPeriod = [form.planStartPeriod?.slice(0, 10), form.planEndPeriod?.slice(0, 10)]

    return {
      form,
    }
  },
  beforeUnmount() {
    console.log('进度表单组件卸载了')
    for (let key in this.form) {
      this.form[key] = ''
    }
  },
})
</script>

<style lang="scss" scoped>
.el-form {
  margin: 0 50px;
}
.nodeName {
  width: 35%;
}
.utils {
  margin: 10px 20px;
}
.index {
  width: 40%;
  height: 18px;
  line-height: 18px;
  .el-input {
    width: 100px;
  }
}
.demo-form-inline .el-form-item {
  width: 100%;
}
:deep(.el-dialog__body) {
  display: block;
  padding: 0 20px;
}
</style>
